<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">创建微创</view>
      <view class="head_right"> </view>
    </view>
    <view class="box">
      <!-- <com-audio :src="file"></com-audio> -->
      <view class="voice">
        <view class="voice_top" v-if="show">只可录制1条语音~</view>
        <view class="voice_title" v-else>
          <view class="voice_title_voi">
            <com-audio :src="file"></com-audio>
          </view>
          <view class="voice_title_text" @click="revoke">撤销</view>
        </view>
        <view class="voice_c">
          <image
            src="@/static/images/pic_cjwc_luzhi.png"
            mode=""
            style="width: 332rpx; height: 332rpx; margin: 0rpx auto"
          ></image>
          <view class="voice_item" @click="transcribe">
            <text class="voice_num" v-show="!isTranscribe">00.000</text>
            <u-count-to
              v-show="isTranscribe"
              :autoplay="autoplay"
              ref="uCountTo"
              :startVal="0"
              :endVal="600"
              :decimals="3"
              :duration="600000"
              :useEasing="false"
              fontSize="56rpx"
              color="#fff"
              @end="endFn"
            ></u-count-to>
            <text class="voice_lu" v-show="isTranscribe">停止</text>
            <text class="voice_lu" v-show="!isTranscribe">点击录制</text>
          </view>
        </view>
        <!-- <button class="btn" @click="submit">提交</button> -->
        <view class="btn">
          <view class="box_btn" @click="submit"> 确认提交 </view>
        </view>
      </view>
    </view>
    <floatingBall></floatingBall>
  </view>
</template>

<script>
import getRecorderManager from "@/common/getRecorderManager.js";
import comAudio from "@/pages/components/audio.vue";
import config from "@/config"; // 配置文件
import storage from "@/common/storage.js"; // 缓存封装
export default {
  components: {
    comAudio,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      file: "",
      show: true,
      isTranscribe: false,
      timeNum: 60 * 1000,
      autoplay: false,
      audio_id: -1,
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    endFn() {
      console.log("录制结束");
      this.transcribe();
    },
    async transcribe() {
      console.log("this.isTranscribe", this.isTranscribe);
      if (this.isTranscribe) {
        let that = this;
        let token = storage.get("token");
        this.isTranscribe = false;
        const url = await getRecorderManager.stopManager();
        console.log("222222222", url);
        uni.showLoading({
          title: "音频上传中",
        });
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: config.uni_app_web_api_url + "/api/upload/audio", // 仅为示例，非真实的接口地址
            filePath: url,
            name: "file",
            formData: {
              user: "test",
            },
            header: {
              "Access-Token": token,
            },
            success: (res) => {
              const data = JSON.parse(res.data);
              // that.file_id.push(data.data.fileInfo.file_id);
              // that.fileList.push({
              //   url: data.data.fileInfo.external_url,
              //   type: "video",
              // });
              console.log(data.data.fileInfo.external_url, "res");
              this.file = data.data.fileInfo.external_url;
              this.audio_id = data.data.fileInfo.file_id;
              console.log(that.file_id, "id数组");
              console.log(that.fileList, "展示数组");
              // resolve(res.data.data);
              that.show = false;
              uni.hideLoading();
            },
            fail: (err) => {
              uni.hideLoading();
              uni.$u.toast("上传失败，请重新上传");
            },
          });
        });
      } else {
        if (!this.show) {
          uni.$u.toast("只能录制一条音频，请删除后再录制");
          return;
        } else {
          this.isTranscribe = true;
          // this.$startManager();

          getRecorderManager.startManager();
          this.$refs.uCountTo.start();
        }
      }
    },
    // async transcribe() {
    // 	if (this.isTranscribe) {
    // 		// this.$refs.uCountTo.paused();
    // 		this.isTranscribe = false;

    // 		const url = await getRecorderManager.stopManager();
    // 		console.log('aaaaaauuu', url);
    // 		const file = await this.uploadFilePromise(url);
    // 		console.log('filefile', file);
    // 		this.file = file;
    // 		this.show = false;
    // 		return
    // 	};
    // 	this.isTranscribe = true;
    // 	// this.$startManager();

    // 	getRecorderManager.startManager();
    // 	this.$refs.uCountTo.start();
    // },
    uploadFilePromise(file) {
      return new Promise((resolve, reject) => {
        audio(file, "/api/upload/video").then((res) => {
          resolve(res);
        });
      });
    },
    revoke() {
      this.show = true;
      this.file = "";
    },
    submit() {
      if (!this.file) {
        uni.$u.toast("您还没有录入");
        return;
      }
      console.log("filefilefile", this.file);
      // let pages = getCurrentPages(); //获取所有页面栈实例列表
      // let nowPage = pages[pages.length - 1]; //当前页页面实例
      // let prevPage = pages[pages.length - 2]; //上一页页面实例
      // prevPage.$vm.src = this.file;
      // uni.navigateBack({
      // 	delta: 1
      // })
      if (!this.file) {
        uni.$u.toast("您还没有录入");
        return;
      }
      let pages = getCurrentPages(); //获取所有页面栈实例列表
      let nowPage = pages[pages.length - 1]; //当前页页面实例
      let prevPage = pages[pages.length - 2]; //上一页页面实例

      prevPage.$vm.src = this.file;
      prevPage.$vm.audio_id = this.audio_id;
      console.log(this.audio_id, "audio_id");
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    display: flex;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.voice {
  padding-top: 32rpx;
}

.voice_top {
  width: 630rpx;
  background: #f8f9fa;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 1;
  margin: 0 30rpx;
  padding: 32rpx 30rpx;
}

.voice_c {
  width: 332rpx;
  height: 332rpx;
  margin: 0 auto;
  margin-top: 150rpx;
  position: relative;
}

.voice_num {
  text-align: center;
  font-size: 56rpx;
  font-weight: 400;
  color: #ffffff;
}

.voice_lu {
  font-size: 30rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.btn {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background: white;
  z-index: 1000;
  .box_btn {
    width: 100%;
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 80rpx;
  }
}

.voice_title {
  margin: 0 30rpx;
  display: flex;
  text-align: center;
}

.voice_title_voi {
  // width: 600rpx;
  width: 75%;
  height: 80rpx;
  // background: #4F7CFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  opacity: 1;
}

.voice_title_text {
  text-align: center;
  margin-left: 30rpx;
  line-height: 80rpx;
}

.voice_item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
